<template>
	<div class="home">
		<div id="main" class="main">
			<h1 class="year white">{{Deta.year}}</h1>
			
			<div class="month" v-for="(m,k) in Deta.month" :key="k" :style="{'--m':k}" :class="{white:k == 0}">{{m}}</div>
			<div class="days" v-for="(d,k) in Deta.days" :key="k" :style="{'--d':k}" :class="{white:k == 0}">{{d}}</div>
			<div class="hours" v-for="(h,k) in Deta.hours" :key="k" :style="{'--h':k}" :class="{white:k == 0}"> {{ h }} </div>
			<div class="minutes" v-for="(min,k) in Deta.minutes" :key="k" :style="{'--min':k}" :class="{white:k == 0}">{{min}}</div>
			<div class="seconds" v-for="(s,k) in Deta.seconds" :key="k" :style="{'--s':k}" :class="{white:k == 0}">{{s}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				Deta: {
					year: '',
					month: [],
					days: [],
					hours: [],
					minutes: [],
					seconds: [],
					allmonth: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', ]
				}
			}
		},
		created() {
			
		},
		mounted() {
			this.getDetaClock()
		},
		methods:{
			getDetaClock() {
				setInterval(() => {
					this.Deta.year = ''
					this.Deta.month = []
					this.Deta.days = []
					this.Deta.hours = []
					this.Deta.minutes = []
					this.Deta.seconds = []
					let d = new Date()
					this.Deta.year = d.getFullYear()
					let mon = d.getMonth()
					let day = d.getDay()
					let hours = d.getHours()
					let min = d.getMinutes()
					let sec= d.getSeconds()
					for(let i = 0; i<12;i++) {
						let key = 0
						if((mon + i) < 12) {
							key = mon + i
						}else {
							key = mon + i -12
						}
						this.Deta.month.push(this.Deta.allmonth[key])
					}
					
					for(let i = 0; i<31;i++) {
						let val = ''
						if(day + i <= 31) {
							val = String(day + i) + "日"
						}else {
							val = String(day + i - 31) + "日"
						}
						val = "0" + val
						this.Deta.days.push(val.slice(-3))
					}
					
					for(let i = 0; i<24;i++) {
						let val = ''
						if(hours + i <= 24) {
							val = String(hours + i) + ":"
						}else {
							val = String(hours + i - 31) + ":"
						}
						val = "0" + val
						this.Deta.hours.push(val.slice(-3))
					}
					
					for(let i = 0; i<60;i++) {
						let val = ''
						if(min + i <= 60) {
							val = String(min + i) + ":"
						}else {
							val = String(min + i - 31) + ":"
						}
						val = "0" + val
						this.Deta.minutes.push(val.slice(-3))
					}
					
					for(let i = 0; i<60;i++) {
						let val = ''
						if(sec + i <= 60) {
							val = String(sec + i) 
						}else {
							val = String(sec + i - 31)
						}
						val = "0" + val
						this.Deta.seconds.push(val.slice(-3))
					}
				},1000)
			}
		}
	}
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		width: 100%;
		height: 100%;
		background-color: #333;
	}
	.main {
		width: 600px;
		height: 600px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		display: flex;justify-content: center;
	}
	.year {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.month {
		position: absolute;
		top: 50%;
		
		width: 50px;
		transform-origin: -60px;
		transform: translateX(85px) rotateZ(calc(30deg * var(--m)));
	}
	.days {
		position: absolute;
		top: 50%;
		
		width: 40px;
		transform-origin: -125px;
		transform: translateX(135px) rotateZ(calc(360deg / 31 * var(--d)));
	}
	.hours {
		position: absolute;
		top: 50%;
		
		width: 40px;
		transform-origin: -175px;
		transform: translateX(185px) rotateZ(calc(360deg / 24 * var(--h)));
	}
	.minutes {
		position: absolute;
		top: 50%;
		width: 40px;
		transform-origin: -225px;
		transform: translateX(225px) rotateZ(calc(360deg / 60 * var(--min)));
	}
	.seconds {
		position: absolute;
		top: 50%;
		width: 40px;
		transform-origin: -265px;
		transform: translateX(265px) rotateZ(calc(360deg / 60 * var(--s)));
	}
	
	.white {
		color: #2CD6E2;
	}
</style>
